<template>
  <div class="vip-manage">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-select v-model="listQuery.operateType" style="width:120px;" @change="handleFilter">
              <el-option
                v-for="item in state"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-input
              v-model="listQuery.userName"
              style="width:220px;"
              placeholder="按用户名"
              @keyup.enter.native="handleFilter"
            />
            <el-date-picker
              v-model="listQuery.daterange"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>

    <el-table :data="memberOperateManageList" border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column min-width="10%" align="center" label="用户名">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickAbout(scope)">{{ scope.row.userName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="操作时间">
        <template slot-scope="scope">
          <span>{{ scope.row.operateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="操作类型">
        <template slot-scope="scope">
          <span>{{ scope.row.operateType | statusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="会员等级">
        <template slot-scope="scope">
          <span>{{ scope.row.levelName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="开通时长">
        <template slot-scope="scope">
          <span>{{ scope.row.openingTime }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="支付费用">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentCost }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />

    <sub-dialog :visiabledialog="visiabledialog" :dialog-data="dialogData" @changeVisiable="changeVisiable"/>
  </div>
</template>

<script>
import SubDialog from '@/components/Dialog' // 个人信息弹窗
import Pagination from '@/components/Pagination' // 分页组件
import { getEduxcloudMemberOperatePager, getEduxcloudUserById } from '@/api/user/user' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: { Pagination, SubDialog },
  filters: {
    statusFilter(status) {
      const statusMap = {
        buy: '购买',
        renew: '续费',
        promote: '升级',
        edit: '编辑',
        delete: '取消会员'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      visiabledialog: false,
      dialogData: {},
      formLabelWidth: '',
      memberOperateManageList: [],
      total: 1,
      currentpage: 1,
      pagesize: 10,
      restaurants: '',
      listQuery: {
        operateType: '',
        userName: '',
        daterange: [],
        page: 1,
        limit: 20
      },
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      state: [
        {
          label: '--购买类型--',

          value: ''
        },
        {
          label: '购买',

          value: 'buy'
        },
        {
          label: '续费',

          value: 'renew'
        },
        {
          label: '升级',

          value: 'promote'
        },
        {
          label: '编辑',

          value: 'edit'
        },
        {
          label: '取消会员',

          value: 'delete'
        }
      ]
    }
  },
  mounted() {
    this.getManageMemberOperateList()
  },
  methods: {
    // dialog子组件触发的函数
    changeVisiable(val) {
      this.visiabledialog = Boolean(val)
    },
    // 查看按钮
    handleClickAbout(scope) {
      this.visiabledialog = true
      getEduxcloudUserById(scope.row.userId).then(response => {
        this.dialogData = response.data.eduxcloudUser
      })
    },
    getManageMemberOperateList() {
      const params = {}
      params.operateType = this.listQuery.operateType
      if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
        params.startDate = this.listQuery.daterange[0]
        params.endDate = this.listQuery.daterange[1]
      }
      params.userName = this.listQuery.userName
      params.page = this.listQuery.page
      params.limit = this.listQuery.limit
      params.tenantId = getTenantId()
      getEduxcloudMemberOperatePager(params).then(response => {
        this.memberOperateManageList = response.data.items
        this.total = response.data.total
      })
    },
    // 数据检索
    handleFilter() {
      this.getManageMemberOperateList()
    },
    clearParams() {
      this.listQuery.daterange = []
      this.listQuery.operateType = ''
      this.listQuery.userName = ''
      this.getManageMemberOperateList()
    },
    // 改变分页页数
    handleSizeChange(val) {
      this.listQuery.page = 1
      this.listQuery.limit = val.value
      this.getManageMemberOperateList()
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.listQuery.page = val.value
      this.getManageMemberOperateList()
    }
  }
}
</script>

<style lang="scss">
.vip-manage {
  .allsearch {
    margin-top: 0;
    padding: 0;
    .search-content {
      width: 100%;
    }
  }
  .el-dialog {
    border-radius: 6px;
  }
}
</style>
